<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

    <title>流量计算</title> 

<script>
var LXE_Q3={
	40: 25,
	50: 40,
	65: 63,
	80: 100,
	100: 160,
	125: 250,
	150: 400,
	200: 630,
	250: 1000,
	300: 1600
}

var ACCURACY={
	1: {
		high: 1,
		low: 2
	},
	2: {
		high: 2,
		low: 5
	}
}

function toRound(value){
	var value2;
	if (value > 1000){
		value2 = value.toFixed(0);
	}
	else if (value > 100){
		value2 = value.toFixed(1);
	}
	else if (value > 10){
		value2 = value.toFixed(2);
	}
	else if (value > 1){
		value2 = value.toFixed(3);
	}
	else{
		value2 = value.toFixed(4);
	}
	return value2
}

// 计算标准参数
function calcPara(){
	var message = '<h2>计算结果</h2>\n'
	message += '<ul data-role="listview" data-inset="true" id="result">\n';

	// 获取口径
	// var obj = document.getElementById("size");
	// var index = obj.selectedIndex;
	// var size = obj.options[index].value;
	var size = $('[name="size"]:checked').val();
	message += '<li data-icon="false">口径：\t' + size + '</li>\n';

	// 量程比获取
	// var ratio = 0
	// var obj = document.getElementsByName('ratio');
	// for (i=0; i<obj.length; i++) {
	// 	if(obj[i].checked){
	// 		ratio = obj[i].value;
	// 	}
	// }
	var ratio = $('[name="ratio"]:checked').val();
	message += '<li data-icon="false">量程比：\t' + ratio + '</li>\n';

	// 获取准确度等级
	// var accuracy = 0
	// var obj = document.getElementsByName('accuracy');
	// for (i=0; i<obj.length; i++) {
	// 	if(obj[i].checked){
	// 		accuracy = obj[i].value;
	// 	}
	// }
	var accuracy = $('[name="accuracy"]:checked').val();
	message += '<li data-icon="false">准确度等级：\t' + accuracy + '</li>\n';

	var accu_h = ACCURACY[accuracy]['high']
	var accu_l = ACCURACY[accuracy]['low']
	message += '<li data-icon="false">高区(Q2≤Q≤Q4)准确度：\t±' + accu_h + '%' + '</li>\n';
	message += '<li data-icon="false">低区(Q1≤Q&ltQ2)准确度：\t±' + accu_l + '%' + '</li>\n';

	// 计算
	var aera = 3.1415926 * (size / 1000 / 2) * (size / 1000 / 2)  // 截面积

	var flow_q3 = LXE_Q3[size]  // 常用流量
	var velo_q3 = flow_q3 / 3600 / aera  // 常用流速
	var flow_q4 = flow_q3 * 1.25  // 最大流量
	var velo_q4 = flow_q4 / 3600 / aera
	var flow_q1 = flow_q3 / ratio
	var velo_q1 = flow_q1 / 3600 / aera
	var flow_q2 = flow_q1 * 1.6
	var velo_q2 = flow_q2 / 3600 / aera
	message += '<li data-icon="false">最大流量(Q4)：\t' + toRound(flow_q4) + 'm<sup>3</sup>/h\t' + toRound(velo_q4) + 'm/s' + '</li>\n';
	message += '<li data-icon="false">常用流量(Q3)：\t' + toRound(flow_q3) + 'm<sup>3</sup>/h\t' + toRound(velo_q3) + 'm/s' + '</li>\n';
	message += '<li data-icon="false">分界流量(Q2)：\t' + toRound(flow_q2) + 'm<sup>3</sup>/h\t' + toRound(velo_q2) + 'm/s' + '</li>\n';
	message += '<li data-icon="false">最小流量(Q1)：\t' + toRound(flow_q1) + 'm<sup>3</sup>/h\t' + toRound(velo_q1) + 'm/s' + '</li>\n';

    message += '</ul>\n';
	// 输出信息
    document.getElementById("message").innerHTML=message;
    $( "#result" ).listview("refresh");
}
</script>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">水表参数计算</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>
		<div data-role="main" class="ui-content">
		<form action="">
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend>口径：</legend>
				<label for="size_40">DN40</label>
				<input type="radio" name="size" id="size_40" onchange="calcPara()" value="40">
				<label for="size_50">DN50</label>
				<input type="radio" name="size" id="size_50" onchange="calcPara()" value="50">
				<label for="size_65">DN65</label>
				<input type="radio" name="size" id="size_65" onchange="calcPara()" value="65">
				<label for="size_80">DN80</label>
				<input type="radio" name="size" id="size_80" onchange="calcPara()" value="80">
				<label for="size_100">DN100</label>
				<input type="radio" name="size" id="size_100" onchange="calcPara()" value="100" checked >
				<label for="size_125">DN125</label>
				<input type="radio" name="size" id="size_125" onchange="calcPara()" value="125">
				<label for="size_150">DN150</label>
				<input type="radio" name="size" id="size_150" onchange="calcPara()" value="150">
				<label for="size_200">DN200</label>
				<input type="radio" name="size" id="size_200" onchange="calcPara()" value="200">
				<label for="size_250">DN250</label>
				<input type="radio" name="size" id="size_250" onchange="calcPara()" value="250">
				<label for="size_300">DN300</label>
				<input type="radio" name="size" id="size_300" onchange="calcPara()" value="300">
			</fieldset>
			
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend>量程比：</legend>
				<label for="radio_160">160:1</label>
				<input type="radio" name="ratio" id="radio_160" onchange="calcPara()" value="160">
				<label for="radio_250">250:1</label>
				<input type="radio" name="ratio" id="radio_250" onchange="calcPara()" value="250" checked >
				<label for="radio_400">400:1</label>
				<input type="radio" name="ratio" id="radio_400" onchange="calcPara()" value="400">
			</fieldset>
			
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend>准确度:</legend>
				<label for="accuracy_1">1级</label>
			    <input type="radio" name="accuracy" id="accuracy_1" onchange="calcPara()" value="1">
				<label for="accuracy_2">2级</label>
				<input type="radio" name="accuracy" id="accuracy_2" onchange="calcPara()" value="2" checked >	
			</fieldset>

		</form>
		<div id="message">选择任意参数开始计算</div>
	    </div>
	</div>

</body>
</html>